<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>文字搬运工</title>
        <style>
            html,body {
                margin:0;
                padding:0;
                background:#ccc;
            }
            #wrap {
                width:800px;
                height:450px;
                margin:50px auto;
                padding:10px;
                border-radius:15px;
                background:#fff;
                overflow:hidden;
            }
            #left {
                float:left;
                width:240px;
                height:400px;
                padding:20px;
                border:none;
                background:#EDEDED;
                outline:none;
                border-radius:10px;
                font-size:18px;
            }
            #center {
                float:left;
                width:240px;
                height:400px;
                background:#fff;
                text-align:center;
            }
            #center a {
                display:block;
                padding:5px 10px;
                font-size:20px;
                background:#F76300;
                color:#fff;
                width:180px;
                height:30px;
                margin:0 auto;
                text-decoration:none;
                line-height:30px;
            }
            #center p {
                font-size:22px;
            }
            #center ul {
                width:140px;
                height:24px;
                margin:0 auto;
                padding:0 25px;
            }
            #center li {
                list-style-type:none;
                float:left;
                margin:2px;
                width:13px;
                height:20px;
            }
            #right {
                float:right;
                width:240px;
                height:400px;
                padding:20px;
                border:none;
                background:#EDEDED;
                outline:none;
                border-radius:10px;
                font-size:18px;
                word-break:break-all;
                word-wrap:break-word;
            }
        </style>
        <script>
            window.onload = function () {
                var oLeft = document.getElementById("left");
                var oCen = document.getElementById("center");
                var oRight = document.getElementById("right");
                var oBtn = oCen.getElementsByTagName("a")[0];
                var oP = oCen.getElementsByTagName("p")[0];
                var oCurrent = document.getElementById("current");
                var oAll = document.getElementById("all");
                var oProgress = document.getElementById("progress");
                var timer = null;
                
                oBtn.onclick = function () {
                    if( oLeft.value == "" ) {
                        alert( "请左侧输入输入内容！" );
                        return;
                    }
                    var str = oLeft.value;
                    var arr = str.split("");
                    var m = 0;
                    var n = 0;
                    var aLi = oProgress.getElementsByTagName("li");
                    oAll.innerHTML = arr.length;
                    oCurrent.innerHTML = 0;
                    this.style.opacity = 0.5;
                    oRight.innerHTML = "";
                    opacity( oProgress,10,100)           //ul开始显示
                    
                    
                    timer = setInterval( function () {
                        var oL = oLeft.value;
                        oLeft.value = oL.substring(1);
                        
                        oRight.innerHTML += arr[m];
                        m++;
                        oCurrent.innerHTML = m;
                        if(m == arr.length) {
                            clearInterval(timer);
                            oBtn.style.opacity = 1;
                            opacity(oProgress,10,0);
                        }
                        
                        for(var i=0; i<aLi.length; i++) {
                            aLi[i].style.background = "#E7A521";
                        }
                        aLi[n].style.background = "red";
                        n++;
                        if(n == aLi.length) {
                            n = 0;
                        }
                        
                        
                        
                    },80 )
                }
                
            }
            
            
             //getStyle
                function getStyle(obj,attr) {
                    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
                }
                
                //shake
                function shake(obj,attr,endFn) {
                    var pos = parseInt( getStyle(obj,attr) );
                    var arr = [];
                    var num = 0;
                    var timer = null;   //*
                    for(var i=10; i>0; i -=2) {
                        arr.push( i,-i );
                    }
                    arr.push(0);
                    
                    clearInterval(obj.shakeTimer);
                    obj.shakeTimer = setInterval( function () {
                        obj.style[attr] = pos + arr[num] + "px";
                        num++;
                        if(num === arr.length) {
                            clearInterval(obj.shakeTimer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },50 )
                    
                }
                
                //doMove
                function doMove(obj,attr,dir,target,endFn) {
                    dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;
                    clearInterval(obj.timer);
                    obj.timer = setInterval( function () {
                        var speed = parseInt( getStyle(obj,attr) ) + dir;
                        if(speed > target && dir > 0 || speed < target && dir < 0) {
                            speed = target;
                        }
                        obj.style[attr] = speed + "px";
                        if(speed == target) {    //*
                            clearInterval(obj.timer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },30 )
                }
                
                //opacity 
                function opacity(obj,step,target,frequency,endFn) {
                    var currentOpacity =  getStyle(obj,"opacity")*100;  //*
                    step = currentOpacity < target ? step : -step;   //*
                    clearInterval(obj.alpha);
                    obj.alpha = setInterval( function () {
                        currentOpacity = getStyle(obj,"opacity")*100;     //为了下面兼容低版本的filter所以乘以100
                        var nextOpacity = currentOpacity + step;
                        if(nextOpacity > target && step >0 || nextOpacity < target && step <0) {
                            nextOpacity = target;
                        }
                        obj.style.opacity = nextOpacity/100;
                        obj.style.filter = "alpha(opacity:"+ nextOpacity +")";
                        if(nextOpacity == target) {
                            clearInterval(obj.alpha);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },frequency )
                }
        </script>
    </head>
    <body>
        <div id="wrap">
            <textarea id="left"></textarea>
            <div id="center">
                <a href="javascript:;">把文字右移</a>
                <p>
                    <span id="current">0</span>
                    /
                    <span id="all">0</span>
                </p>
                <ul id="progress">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="right"></div>
        </div>
    </body>
</html>